<template>
  <div style="line-height:0">
    <el-dialog title="充值" width="25%" :visible.sync="xfdialogFormVisible" append-to-body center
               :close-on-click-modal="false">
      <el-form>
        <el-form-item label="卡号" style="margin: 10px">
          <el-tag type="success">{{ cardIn.card.cardNum }}</el-tag>
        </el-form-item>
        <el-form-item label="姓名" style="margin: 10px">
          <el-tag type="success">{{ cardIn.card.student.name }}</el-tag>
        </el-form-item>
        <el-form-item label="学号" style="margin: 10px">
          <el-tag type="success">{{ cardIn.card.student.studentNumber }}</el-tag>
        </el-form-item>
        <el-form-item label="余额" style="margin: 10px">
          <el-tag type="success">{{ cardIn.card.cardMoney }}</el-tag>
        </el-form-item>
        <el-form-item label="充值金额" style="margin: 10px">
          <el-input v-model="cardIn.inMoney" autocomplete="off" placeholder="请输入充值金额/(元)"
                    style="width: 220px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="inMoney">确 定</el-button>
      </div>
    </el-dialog>

    <div style="text-align: left;margin-top: 20px">
      <span style="margin-left: 20px">校园卡号码：</span>
      <el-input clearable size="mini" v-model="cardDataVo.data.cardNum" style="width: 120px" placeholder="请输入卡号"></el-input>
      <span style="margin-left: 20px">姓名：</span>
      <el-input clearable size="mini" v-model="cardDataVo.data.student.name" style="width: 150px" placeholder="请输入姓名"></el-input>
      <span style="margin-left: 20px">学号：</span>
      <el-input clearable size="mini" v-model="cardDataVo.data.student.studentNumber" style="width: 150px"
                placeholder="请输入学号"></el-input>
      <span style="margin-left: 20px">状态：</span>
      <el-select size="mini" v-model="cardDataVo.data.cardStatus" clearable placeholder="请选择" style="width:120px">
        <el-option key="0" label="请选择" value=""></el-option>
        <el-option key="1" label="使用中" value="y"></el-option>
        <el-option key="2" label="停用中" value="n"></el-option>
      </el-select>&emsp;
      <el-button size="mini" style="margin-left: 15px; margin-top: 15px;" type="primary" icon="el-icon-search"
                 @click="found">查找
      </el-button>
    </div>
    <el-table class="tableBorder" :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }" :row-style="{ 'height': '20px' }" :data="tableData"
              style="width: 100% ;margin-top: 20px" :stripe="true" :border="true" :highlight-current-row="true"
              size="mini">
<!--      <el-table-column prop="id" label="ID" width="80">-->
<!--      </el-table-column>-->
            <el-table-column type="selection" label="序号" width="80">
            </el-table-column>
      <el-table-column prop="cardNum" label="卡号" width="220">
      </el-table-column>
      <el-table-column prop="student.name" label="姓名" width="150">
      </el-table-column>
      <el-table-column prop="student.studentNumber" label="学号" width="220">
      </el-table-column>
      <el-table-column label="余额" width="150">
        <template scope="scope">
          <el-tag type="danger">{{ scope.row.cardMoney }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="150">
        <template scope="scope">
          <el-switch
              v-model="scope.row.status"
              @change="open(scope.row)"
          >
          </el-switch>
        </template>

      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary " @click="show(scope.row)">充值</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div class="block" style="text-align:center">
      <el-pagination :background="true" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="cardDataVo.pageInfo.pageNum" :page-sizes="cardDataVo.pageInfo.pageSizes"
                     :page-size="cardDataVo.pageInfo.pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="cardDataVo.pageInfo.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      cardIn: {
        inMachineId: 4,
        inMoney: null,
        card: {
          id: null,
          cardNum: null,
          cardMoney: null,
          student: {
            studentNumber: null,
            name: null,
          },
        },
      },
      xfdialogFormVisible: false,
      ableUse: null,
      value: true,
      tableData: [],
      cardDataVo: {
        data: {
          cardNum: "",
          cardStatus: "",
          student: {
            studentNumber: "",
            name: "",
          }
        },
        pageInfo: {
          pageSizes: [10, 20, 50, 100],
          pageNum: 1,
          pageSize: 10,
          total: 0,
        },
      },
    }
  },
  methods: {
    cancel() {
      this.xfdialogFormVisible = false;
      this.cardIn.card.cardNum = null;
      this.cardIn.card.student.name = null;
      this.cardIn.card.student.studentNumber = null;
      this.cardIn.card.cardMoney = null;
      this.cardIn.inMoney = null;
    },
    show(row) {
      this.cancel();
      this.$axios({
        method: 'post',
        url: "/api/card/getById",
        data: row,
      }).then((r) => {
        if (r.data.code == 200) {
          this.cardIn.card = r.data.data;
        }
      })

      this.xfdialogFormVisible = true;
    },
    handleSizeChange(val) {
      this.cardDataVo.pageInfo.pageSize = val;
      this.list();

    },
    handleCurrentChange(val) {
      this.cardDataVo.pageInfo.pageNum = val;
      this.list();
    },
    list() {
      this.$axios({
        method: 'post',
        url: "/api/card/list",
        data: this.cardDataVo,
      }).then((r) => {
        if (r.data.code == 200) {
          r.data.data.list.forEach(
              card => {
                card.status = card.cardStatus == "y";
              }
          )
          this.tableData = r.data.data.list;
          this.cardDataVo.pageInfo.total = r.data.data.total;
        }
      })
    },
    found() {
      this.list()
    },
    inMoney() {
      this.$axios({
        method: 'post',
        url: "/api/card/inMoney",
        data: this.cardIn,
      }).then((r) => {
        if (r.data.code == 200) {
          this.$message({
            type: 'success',
            message: '充值成功!',
          });
          this.cancel();
        }
      })

    },
    copStatus(row) {
      if (row.doStatus == true) {
        let able;
        if (row.cardStatus === "y") {
          able = "n";
        } else {
          able = "y";
        }
        let card = {
          id: row.id,
          cardStatus: able,
        };
        this.$axios({
          method: 'post',
          url: "/api/card/update",
          data: card,
        }).then((r) => {
          if (r.data.code == 200) {
            this.$message({
              type: 'success',
              message: '操作成功!',
            });
          }
        })

      } else {
        row.status = !row.status
      }
    },
    open(row) {
      let status = row.cardStatus;
      let able;
      if (status == 'y') {
        able = "禁用";
      } else {
        able = "启用";
      }
      this.$confirm('此操作将' + able + '此校园卡, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        row.doStatus = true;
        this.copStatus(row);
      }).catch(() => {
        row.doStatus = false;
        this.copStatus(row);
        this.$message({
          type: 'info',
          message: '已取消' + able + '',
        });
      });

    }

  },
  created() {
    this.list();
  }
}
</script>